<template>
  <div class="add-btn">
    <el-dialog
      title="选择设备"
      :visible.sync="dialogVisible"
      width="1000px"
      :append-to-body="true"
      @close="closeDialog"
      :close-on-click-modal="false"
    >
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="设备" name="shebei">
          <div>
            <div class="header" style="margin-bottom: 10px">
              <div class="header_left"></div>
              <div class="header_right">
                <el-input
                  placeholder="请输入设备编码"
                  v-model="search_val"
                  style="width: 300px; margin-right: 15px"
                  size="small"
                  maxlength="20"
                  clearable
                  @clear="clearInput"
                  class="el_input"
                >
                  <el-button
                    slot="append"
                    :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                    @click="searchClick"
                  >
                  </el-button>
                </el-input>
              </div>
            </div>
            <div class="content">
              <el-table
                :data="deviceList"
                class="table"
                :header-cell-style="headerStyle"
                ref="refTable"
                row-key="imei"
                @selection-change="batchSelect"
                height="280px"
              >
                <el-table-column
                  align="center"
                  type="selection"
                  :reserve-selection="true"
                  width="60"
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="imei"
                  label="设备编码"
                  min-width="100"
                  show-overflow-tooltip
                ></el-table-column>
                <el-table-column
                  align="center"
                  prop="spaceName"
                  label="安装点"
                  min-width="100"
                  show-overflow-tooltip
                ></el-table-column>
              </el-table>
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="page"
                :limit.sync="limit"
                :pageSizes="[10, 20, 30, 50]"
                @pagination="getDataList"
                class="pagination"
              />
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="探测器" name="tanceqi">
          <div class="header" style="margin-bottom: 10px">
            <div class="header_left"></div>
            <div class="header_right">
              <el-input
                placeholder="请输入探测器名称"
                v-model="search_val"
                style="width: 300px; margin-right: 15px"
                size="small"
                maxlength="20"
                clearable
                @clear="clearInput"
                class="el_input"
              >
                <el-button
                  slot="append"
                  :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
                  @click="searchClick"
                >
                </el-button>
              </el-input>
            </div>
          </div>
          <div class="content">
            <el-table
              :data="deviceListTanceqi"
              class="table"
              :header-cell-style="headerStyle"
              ref="refTableTanceqi"
              row-key="deviceCode"
              @selection-change="batchSelect2"
              @select="selectRow"
              height="280px"
            >
              <el-table-column
                align="center"
                type="selection"
                :reserve-selection="true"
                width="60"
              ></el-table-column>
              <el-table-column
                align="center"
                prop="detectorName"
                label="探测器名称"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
              <el-table-column
                align="center"
                prop="spaceName"
                label="安装点"
                min-width="100"
                show-overflow-tooltip
              ></el-table-column>
            </el-table>
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="page"
              :limit.sync="limit"
              :pageSizes="[10, 20, 30, 50]"
              @pagination="getDataListTannceqi"
              class="pagination"
            />
          </div>
        </el-tab-pane>
      </el-tabs>

      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog" class="cancel-button"
          >取 消</el-button
        >
        <el-button
          size="small"
          @click="submit"
          v-preventReClick="1000"
          class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import tableStyleMixin from "@mixin/table-style";
import Pagination from "@components/Pagination.vue";
import { mapState } from "vuex";
import { reqDeviceList, reqDetectorPage } from "@api/api.js";
export default {
  props: [
    "orgId",
    "unitId",
    "buildingId",
    "floorId",
    "spaceId",
    "choseData1",
    "choseData2",
  ],
  mixins: [tableStyleMixin],
  components: { Pagination },
  data() {
    return {
      dialogVisible: false,
      loadingSearch: false,
      activeName: "shebei",
      search_val: "",
      deviceList: [],
      limit: 10,
      page: 1,
      total: 0,
      batchDataList: [],
      choseDataDev: [],
      choseData1_copy: [],

      // 探测器
      deviceListTanceqi: [],
      batchDataList2: [],
      choseDataTCQ: [],
      choseData2_copy: [],
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {
    async dialogVisible(val) {
      if (val) {
        this.batchDataList = [];
        this.batchDataList2 = [];
        this.choseDataDev = this.choseData1_copy = this.choseData1;
        this.choseDataTCQ = this.choseData2_copy = this.choseData2;
        this.activeName = "shebei";
        this.page = 1;
        this.limit = 10;
        await this.getDataList();
        // 第一次需要赋值翻页的数据
        this.$nextTick(() => {
          this.choseData1_copy.forEach((item, index) => {
            let exists = this.deviceList.find(
              (item2) => item2.imei === item.imei
            );
            if (!exists) {
              this.$refs.refTable.toggleRowSelection(item, true);
            }
          });
        });
      }
    },
  },
  methods: {
    // tabs切换
    async handleClick(tab) {
      if (tab.name == "shebei") {
        this.page = 1;
        this.limit = 10;
        await this.getDataList();
        // 第一次需要赋值翻页的数据
        this.$nextTick(() => {
          this.choseData1_copy.forEach((item, index) => {
            let exists = this.deviceList.find(
              (item2) => item2.imei === item.imei
            );
            if (!exists) {
              this.$refs.refTable.toggleRowSelection(item, true);
            }
          });
        });
      } else if (tab.name == "tanceqi") {
        this.page = 1;
        this.limit = 10;
        await this.getDataListTannceqi();
        // 第一次需要赋值翻页的数据
        this.$nextTick(() => {
          this.choseData2_copy.forEach((item, index) => {
            let exists = this.deviceListTanceqi.find(
              (item2) => item2.deviceCode === item.deviceCode
            );
            if (!exists) {
              this.$refs.refTableTanceqi.toggleRowSelection(item, true);
            }
          });
        });
      }
    },
    // 获取设备列表
    async getDataList() {
      const res = await reqDeviceList(this.page, this.limit, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        buildingId: this.buildingId,
        floorId: this.floorId,
        spaceId: this.spaceId,
        imei: this.search_val || "",
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.total = res.data.total;
      this.deviceList = res.data.rows;
      this.$nextTick(() => {
        this.dataReplace();
      });
    },

    // 数据替换
    dataReplace() {
      this.choseDataDev.forEach((item) => {
        this.deviceList.forEach((dataItem) => {
          if (dataItem.imei === item.imei) {
            this.$refs.refTable.toggleRowSelection(item, false);
            this.$refs.refTable.toggleRowSelection(dataItem, true);
          }
        });
      });
    },
    // 搜索
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      if (this.activeName == "shebei") {
        await this.getDataList();
      } else {
        await this.getDataListTannceqi();
      }
      this.loadingSearch = false;
    },
    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      this.batchDataList = arr;
      this.choseDataDev = arr;
    },
    // 清空
    clearInput() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },

    // 获取探测器设备列表
    async getDataListTannceqi() {
      const res = await reqDetectorPage(this.page, this.limit, {
        userId: this.user.userId,
        roleName: this.user.roleName,
        tenantId: this.user.tenantId,
        buildingId: this.buildingId,
        floorId: this.floorId,
        spaceId: this.spaceId,
        detectorName: this.search_val || "",
        parentId: "",
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.deviceListTanceqi = res.data.rows;
      this.total = res.data.total;
      this.$nextTick(() => {
        this.dataReplaceTannceqi();
      });
    },
    // 数据替换
    dataReplaceTannceqi() {
      this.choseDataTCQ.forEach((item) => {
        this.deviceListTanceqi.forEach((dataItem) => {
          if (dataItem.deviceCode === item.deviceCode) {
            this.$refs.refTableTanceqi.toggleRowSelection(item, false);
            this.$refs.refTableTanceqi.toggleRowSelection(dataItem, true);
          }
        });
      });
    },
    // 点击复选框触发，可跨分页选择
    batchSelect2(arr) {
      this.batchDataList2 = arr;
      this.choseDataTCQ = arr;
    },
    selectRow(s, r) {
      console.log(s, "s");
      console.log(r, "r");
    },
    closeDialog() {
      this.choseDataDev = [];
      this.choseDataTCQ = [];
      this.$refs.refTable.clearSelection();
      this.$refs.refTableTanceqi.clearSelection();
      this.dialogVisible = false;
    },
    submit() {
      if (this.batchDataList.length && this.batchDataList2.length) {
        this.$emit("getDevices", this.batchDataList, this.batchDataList2);
      } else if (this.batchDataList.length) {
        console.log(this.batchDataList, "this.batchDataList");
        this.$emit("getDevices", this.batchDataList, []);
      } else if (this.batchDataList2.length) {
        this.$emit("getDevices", [], this.batchDataList2);
      } else {
        this.$modal.notifyWarning("请选择设备");
        return;
      }
      this.closeDialog();
    },
  },
};
</script>
<style lang="less" scoped>
@import url("~@views/style/tablePage.less");
@import url("../../common.less");
::v-deep .el-tabs--border-card > .el-tabs__header .el-tabs__item.is-active {
  color: #7367f0;
}

::v-deep .el-tabs__header .el-tabs__item.is-active {
  border-bottom: 1px solid #7367f0;
}

/* 修改鼠标移入时的样式 */
::v-deep .el-tabs__item:hover {
  color: #7367f0 !important;
}

::v-deep .el-tabs--border-card {
  border: none !important;
  box-shadow: none !important;
}

::v-deep .el-checkbox__inner {
  background-color: transparent !important;
  border: 1px solid @primaryBorder !important;
}
// 多选框
.el-checkbox {
  color: @primaryThemeTxtColor2 !important;
}

// 单选框
.el-radio__inner {
  background: none !important;
}

::v-deep .el-radio__input.is-disabled .el-radio__inner {
  background: #e1e2e6 !important;
}
</style>
